<template>
	<view>
		<view class="zhanwei"></view>
		<!-- 自定义导航 -->
		<faquanNavBar :tabBars="tabBars" :tabIndex="tabIndex" @pidchang-tab="pidchangTab"></faquanNavBar>		
		<!-- 将导航栏数据放入navData中,默认为{[name: 'XXX']}，可到componets/Nav.vue中修改 -->
		<Nav :navData="navData" @changeTab='changeTab' :changeNavIndex="current"></Nav>
		<!-- 列表 -->
		<view class="uni-tab-bar">			
			<swiper class="swiper-box" :current="tabIndex" @change="tabChange">
				<swiper-item>
					<swiper :current="current" :autoplay="false" ::duration="200" @change="changeSwiper">
						<swiper-item v-for="(item, index) in navData">
							<!-- 内容页面位置 -->
							<scroll-view scroll-y class="items" @scrolltolower="loadmore(index)">
								<view class="faquan-index" v-for="(item, index) in classifyData">
									<view class="faquan-index-top">
										<view class="faquan-index-avatar">
											<image :src="item.sola_image"></image>
										</view>
										<view class="faquan-index-name">
											<view>买购君</view>
											<view>刚刚</view>
										</view>
										<view class="faquan-index-button">
											<view @click="downloadimg(item)">
												<image src="../../static/buytao/download.png"></image>
												下载发圈
											</view>
											<view @click="shareclick(item)">
												<image src="../../static/buytao/faquan.png"></image>
												1.2万
											</view>
										</view>
									</view>
								
									<view class="faquan-index-content" @click="goodsdetail(item)">
										<view>
											<text v-html="item.copy_content"></text>
										</view>
										<view class="faquan-index-content-detail">
											查看详情
											<image src="../../static/buytao/xiangqing.png"></image>
										</view>
									</view>
								
									<view class="faquan-index-image">
										<view v-for="(value,index1) in item.itempic" v-if="index1<3">
											<image :src="value"></image>
										</view>
									</view>
								
									<view class="faquan-index-kouling" @click="duplication(item)">
										<view>{{item.copy_comment}}</view>
										<view><text>复制评论</text></view>
									</view>
								</view>
								<uni-load-more :status="more"></uni-load-more>
							</scroll-view>
						</swiper-item>
					</swiper>
				</swiper-item>

				<swiper-item>
					<swiper :current="current" :autoplay="false" :duration="200" @change="changeSwiper">
						<swiper-item v-for="(item, index) in navData">
							<scroll-view scroll-y class="items" @scrolltolower="loadmore(index)">
								<view class="faquan-index" v-for="(item, index) in classifyData">
									<view class="faquan-index-top">
										<view class="faquan-index-avatar">
											<image src="../../static/buytao/buygou1.png"></image>
										</view>
										<view class="faquan-index-name">
											<view>{{item.author}}</view>
											<view>刚刚</view>
										</view>
										<view class="faquan-index-button">
											<view>
												<!-- <image src="../../static/buytao/faquan.png"></image>
												1.2万 -->
											</view>
											
											<view>
												<image src="../../static/buytao/download.png"></image>
												下载
											</view>
										</view>
									</view>
									<view class="faquan-index-content">
										<view>
											<text v-html="item.content"></text>
										</view>
										<view class="faquan-index-content-detail">
											查看详情
											<image src="../../static/buytao/select.png"></image>
										</view>
									</view>
									<view class="faquan-index-image">
										<view v-for="(value,index1) in item.images" v-if="index1<3">
											<image :src="value"></image>
										</view>
									</view>
								</view>
								<uni-load-more :status="more"></uni-load-more>
							</scroll-view>
						</swiper-item>
					</swiper>					
				</swiper-item>
				
			</swiper>
		</view>
	</view>
</template>

<script>
	import tools from '../../common/tools'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more'
	import faquanNavBar from "../../components/faquan/faquan-nav-bar"
	import commonList from "../../components/common/common-list"
	import Nav from '../../components/faquan/zq-Nav'
	import apiindex from '../../common/api/index.js'
	export default {
		data() {
			return {
				more:'loading',
				listHeight:0,
				swiperHeight:500,//屏幕高度
				tabIndex:0,//tab索引
				tabBars:[
					{name:"优选",id:"guanzhu"},
					{name:"素材",id:"huati"}
				],
				// 导航栏数据
				navData: [],
				// 分类数据
				classifyData: [],
				faquan_params:{
					page:1,
					cid:0,
					site:'haodanku',
				},
				sucai_params:{
					page:1,
					type:1,
				},
				current: 0,
				refreshering: true,
				
				user_info:{},
				goods_link:{
					taoword:'',
				}
			}
		},
		onLoad() {
			this.article_cate()
			this.faqian()
		},
		
		onShow() {
		},
		components:{
			faquanNavBar,
			commonList,
			Nav,
			apiindex,
			uniLoadMore,
			tools,
		},
		methods: {
			
			getlistHeight(){
				let screen = uni.getSystemInfoSync()
				this.swiperHeight = screen.screenHeight
				// let query = uni.createSelectorQuery().in(this);
				// query.selectAll(list).boundingClientRect();
				// console.log(query.select(list))
				// query.exec((res) => {
				// 	console.log(res)
				// })
				// info.select(list).boundingClientRect(data => {
				// 	console.log(data)
				// }).exec();
			},
			
			
			
			
			//发圈列表
			faqian(){
				apiindex.faquan(this.faquan_params).then(res =>{
					this.classifyData = res.data
				}).catch(cateres =>{

				});
			},
			
		
			// 选择导航栏事件
			changeTab(index){
				this.current = index
				if(this.tabIndex == 0){
					if(index != 0){
						this.faquan_params.cid=this.navData[index].id
					}else{
						this.faquan_params.cid=0
					}
					this.faquan_params.page=1
					this.faqian(this.faquan_params)
				}else{
					this.sucai_params.page=1
					this.sucai_params.type=this.navData[index].id
					this.article_list()
				}
			},
			
			
			//获取优选列表
			article_cate(params={}){
				apiindex.article_cate(params).then(res =>{
					this.navData = res.data;
				}).catch(cateres =>{
					
				});
			},
			
			
			//文章分类
			article_category(params={}){
				apiindex.article_category(params).then(res =>{
					this.navData = res.data;
					this.sucai_params.type=res.data[this.tabIndex].id
					this.article_list()
				}).catch(cateres =>{
					
				});
			},
			
			
			//文章列表
			article_list(){
				apiindex.article_list(this.sucai_params).then(res =>{
					this.classifyData=res.data.items
				}).catch(cateres =>{
					
				});
			},
			
			
			//点击切换
			pidchangTab(index){
				this.navData=[]
				if(index == 0){
					this.article_cate()
				}else{
					this.article_category()
				}
				this.tabIndex = index;
			},
			
			
			//滑动切换 下面的小图标
			tabChange(e){
				this.tabIndex = e.detail.current
				if(this.tabIndex == 0){			//优选
					this.faquan_params.page=1
					this.article_cate()
					this.faqian(this.faquan_params);
				}else{							//素材
					this.sucai_params.page=1
					this.article_category()
					this.article_list()
				}
			},


			//跳转商品详情
			goodsdetail(items){
				uni.navigateTo({
					url: '../product/product?site='+items.site+"&goods_id="+items.itemid,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},	

			//下载图片到本地存储
			downloadimg(item){
				console.log(item)
				tools.downloadfileimg(item.itempic_old)
			},

			// 返回父元素选中的值
			changeSwiper(e) {
				//下面的小标题
				this.current = e.detail.current
			},
			
			
			//复制淘口令
			duplication(item){
				this.created_taoword(item,false)
				uni.setClipboardData({
					data: this.goods_link.taoword
				});
			},
			
			//分享链接
			shareclick(item){
				console.log(item)
				this.created_taoword(item,true)
			},
			
			
			//生成淘口令
			created_taoword(item,is_turn){
				this.user_info = tools.get_storage_sync('user_info')
				if(this.user_info.tb_rid == '' || this.user_info.tb_rid == 'null' || this.user_info.tb_rid == null){
					this.authrid_totaobao()
				}else{
					this.goods_turn(item,is_turn)
				}
			},
			
			
			
			/**
			 * 用户去淘宝授权
			 */
			authrid_totaobao(){
				if(typeof this.user_info.tb_rid != 'undefined'){
					if(this.user_info.tb_rid =='' || this.user_info.tb_rid==null){
						apiuser.taobao_auth({}).then(res => {
							if(res.code == 1){
								tools.tb_openh5url(res.data.url)
							}
						}).catch(res => {
							
						});
					}
				}else{
					uni.navigateTo({
						url: '../public/login',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			
			
			/**
			 * item 需要的商品信息
			 * is_turn是否需要跳转
			 * 淘宝转链
			 */
			goods_turn(item,is_turn=false){
				let taoword_params={url:item.couponurl,title:item.itemtitle,image:item.sola_image,goods_id:item.itemid}
				apiindex.taoword(taoword_params).then(res => {
					if(res.code == 1){
						this.goods_link.taoword=res.data
						if(is_turn){
							let goods_params={
								title:item.title,
								monthsale:item.dummy_click_statistics,
								endprice:item.itemendprice,
								price:item.itemprice,
								img_url:item.sola_image,
								taoword:this.goods_link.taoword,
								couponmoney:item.couponmoney,
								shoptype:item.shopType,
							}
							uni.navigateTo({
								url:"../poster/goods?goods_params="+encodeURIComponent(JSON.stringify(goods_params))
							})
						}
					}
				}).catch(res => {
				});				
			},
			
			
			
			
			//加载更多
			loadmore(){
				if(this.tabIndex == 0){
					this.faquan_params.page = this.faquan_params.page+1
					setTimeout(()=>{
						apiindex.faquan(this.faquan_params).then(res =>{
							//获取数据
							if(res.data.length>0){
								for(var i=0;i<res.data.length;i++){
									this.classifyData.push(res.data[i]);
								}
							}else{
								this.more='noMore'
							}
						}).catch(cateres =>{
					
						});
					},2000);
				}else{
					this.sucai_params.page = this.sucai_params.page+1
					setTimeout(()=>{
						apiindex.article_list(this.sucai_params).then(res =>{
							//获取数据
							if(res.data.items.length>0){
								for(var i=0;i<res.data.items.length;i++){
									this.classifyData.push(res.data.items[i]);
								}
							}else{
								this.more='noMore'
							}
						}).catch(cateres =>{
							
						});
					},2000);
				}
				
				
			},
			
		}
	}
</script>

<style scoped>
	.zhanwei{
		height:60upx;
	}
	uni-swiper{
		height:100%;
	}
	.items{
		width:100%;
		height: 100%;
		overflow-y: auto;
	}
	.items>last-child{
		padding-bottom:0;
	}
	.uni-tab-bar{
		position: fixed;
		width: 100%;
		height: calc(94% - 50px);
	}
	.faquan-index{
		width:96%;
		padding:2%;
	}
	.faquan-index-top{
		width:100%;
		display: flex;
		flex-direction:row;
		flex-wrap:wrap;
		white-space:nowrap;
	}
	.faquan-index-avatar{
		width:15%;
	}
	.faquan-index-avatar image{
		width:80upx;
		height:80upx;
		border-radius:40upx;
	}
	.faquan-index-name{
		width:45%;
	}
	.faquan-index-name>view{
		margin-left:10upx;
	}
	.faquan-index-name>view:first-child{
		font-weight:bold;
		font-size:30upx;
		line-height:30upx;
	}
	.faquan-index-name>view:last-child{
		background:#FA436A;
		color:#fff;
		display:inline-block;
		padding:0 10upx;
		font-size:20upx;
		border-radius:10upx;
		
	}
	.faquan-index-button{
		width:40%;
		padding-top:10upx;
		display: flex;
		flex-direction:row;
		flex-wrap:wrap;
		white-space:nowrap;
	}
	.faquan-index-button>view:first-child{
		width:50%;
	}
	.faquan-index-button>view:last-child{
		width:40%;
		margin-left:10%;
	}
	.faquan-index-button image{
		width:30upx;
		height:30upx;
		display:inline-block;
		position: relative;
		top:5upx;
	}
	.faquan-index-button text{
		padding:5upx 10upx;
		margin-right:10upx;
		border-radius:10upx;
	}
	.faquan-index-button>text:first-child{
		background: #FA436A;
	}
	.faquan-index-button>text:last-child{
		background:#F76260;
	}
	.faquan-index-content-detail{
		color:#FA436A;
		font-size:30upx;
		font-weight:bold;
	}
	.faquan-index-content-detail>image{
		display:inline-block;
		width:30upx;
		height:30upx;
		margin-left:10upx;
		position:relative;
		top:5upx;
	}
	.faquan-index-image{
		width:100%;
		display: flex;
		flex-direction:row;
		flex-wrap:wrap;
		white-space:nowrap;
		flex:1;
	}
	.faquan-index-image>view{
		width:28%;
		padding:2%;
	}
	.faquan-index-image>view>image{
		width:100%;
		height:200upx;
	}
	.faquan-index-kouling{
		width:98%;
		background:#F8F6FC;
		padding:2%;
	}
	.faquan-index-kouling>view:last-child{
		text-align:right;
	}
	.faquan-index-kouling>view:last-child>text{
		padding:10upx 20upx;
		border:#FA436A 1px solid;
		text-align:right;
		color:#FA436A;
		border-radius:20upx;
	}
	
</style>
